<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>IQC来料明细表</title>
    <link rel="stylesheet" href="/3nod_web/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/3nod_web/css/formSelects-v4.css" />
</head>
<body>
<div id="content">
    <h1>IQC来料明细表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="/3nod_web/exportSuppliedMaterials">
            <button class="layui-btn  layui-btn-sm">导出</button>
        </a>
    </h1>

    <form class="layui-form" action="javascript:;" id="myform">
        <div>
            <div class="layui-form-item" style="margin-top: 20px">
                <div class="layui-inline">
                    <label class="layui-form-label">送货单</label>
                    <div class="layui-input-inline" style="width:168px;">
                        <input type="text" name="extReceiptForm" id="extReceiptForm" autocomplete="off"
                               class="layui-input"
                        >
                    </div>
                </div>
                <div class="layui-inline ">
                    <label class="layui-form-label">货主</label>
                    <div class="layui-input-inline " style="width: 168px;">
                        <select name="shipper"lay-filter="shipper" id="shipper">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">物料编码</label>
                    <div class="layui-input-inline" style="width:168px;">
                        <input type="text" name="sku" id="sku" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class=" layui-inline">
                    <label class="layui-form-label">检验结果</label>
                    <div class="layui-input-inline " style="width: 168px;">
                        <select id="checkResult" lay-filter="checkResult">
                            <option value="">请选择</option>
                            <option value="合格">合格</option>
                            <option value="不合格">不合格</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">供应商代码</label>
                    <div class="layui-input-inline" style="width:168px;">
                        <input type="text" name="supplierKey" id="supplierKey" autocomplete="off" class="layui-input"
                        >
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">供应商名称</label>
                    <div class="layui-input-inline" style="width:168px;">
                        <input type="text" name="supplierName" id="supplierName" autocomplete="off" class="layui-input"
                        >
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline" style="width:168px;">
                        <input type="text" name="startTime" id="startTime" autocomplete="off" class="layui-input"
                               th:value="${startTime}"
                        >
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline" style="width:168px;">
                        <input type="text" name="endTime" id="endTime" autocomplete="off" class="layui-input"
                               th:value="${endTime}">
                    </div>
                </div>
                <div class=" layui-inline">
                    <label class="layui-form-label">机型</label>
                    <div class="layui-input-inline " style="width: 300px;">
                        <select id="modelKey" lay-search name="modelKey"  xm-select="select1">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-inline" style="width:168px;">
                        <input type="text" name="remark" id="remark" autocomplete="off" class="layui-input"
                        >
                    </div>
                </div>
                <!--<div class="layui-inline">-->
                    <!--<label class="layui-form-label">原因分析</label>-->
                    <!--<div class="layui-input-inline" style="width:168px;">-->
                        <!--<input type="text" name="reasonAnalysis" id="reasonAnalysis" autocomplete="off" class="layui-input"-->
                        <!--&gt;-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-inline">-->
                    <!--<label class="layui-form-label">改善措施</label>-->
                    <!--<div class="layui-input-inline" style="width:168px;">-->
                        <!--<input type="text" name="improvementMeasure" id="improvementMeasure" autocomplete="off" class="layui-input"-->
                        <!--&gt;-->
                    <!--</div>-->
                <!--</div>-->

                <div class=" layui-inline">
                    <label class="layui-form-label">判定方式</label>
                    <div class="layui-input-inline " style="width: 300px;">
                        <select id="decideway" lay-search name="decideway"  xm-select="select2">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <input id="huanweiType"  lay-filter="huanweiType" type="checkbox" name="" title="华为机型" lay-skin="primary">
                </div>
                <div class="layui-inline">
                    <button id="search" class="layui-btn layui-btn-sm">搜索</button>
                </div>
            </div>
        </div>
    </form>
</div>

<table class="layui-hide" id="demo" lay-filter="demo"></table>


<script src="/3nod_web/layui/layui.js" charset="utf-8"></script>
<script src="/3nod_web/js/jquery-1.8.3.js" charset="utf-8"></script>
<script src="/3nod_web/js/formSelects-v4.min.js" charset="utf-8"></script>
<script>


    var formSelects = layui.formSelects;
    var modelKeyStr = null;
    var decideWayStr = null;
    layui.use('form', function(){
        var form = layui.form;
        getShipper();
        getDecideWay();
        // 货主change事件
        form.on('select(shipper)', function (data) {
            getModelKey();
        });
    });

    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#startTime'//指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#endTime'//指定元素
        });
    });

    layui.use(['table','upload'], function () {
        var table = layui.table
            ,upload = layui.upload;

        //方法级渲染
        table.render({
            elem: '#demo'
            , url: '/3nod_web/report/suppliedMaterialsList/'
            , cellMinWidth: 150
            , cols: [
                [

                    {field: 'shipper', title: '货主',fixed: true, sort: true, width: 150}
                    , {field: 'receiptKey', title: 'ASN/收货单',fixed: true, sort: true, width: 150}
                    , {field: 'serialkey', title: '序号',width: 150}
                    , {field: 'extReceiptForm', title: '外部收货单', width: 150}
                    , {field: 'receiveTime', title: '收货时间'}
                    , {field: 'supplierKey', title: '供应商代码'}
                    , {field: 'supplierName', title: '供应商名称'}
                    , {field: 'sku', title: '物料编码'}
                    , {field: 'materialDesc', title: '物料描述'}
                    , {field: 'modelName', title: '机型'}
                    , {field: 'decideWay', title: '判定方式'}
                    , {field: 'receivedQty', title: '接收量'}
                    , {field: 'samplingQuantity', title: '抽检数量'}
                    , {field: 'conformityQuantity', title: '合格数量'}
                    , {field: 'unqualifiedQuantity', title: '不合格数量'}
                    , {field: 'rejectRation', title: '不良率'}
                    , {field: 'checkResult', title: '检查结果'}
                    , {field: 'culprit', title: '不良现象'}
                    , {field: 'inventoryQuantity', title: '入库数量'}
                    , {field: 'checkBackQuantity', title: '验退数量'}
                    , {field: 'remark', title: '备注'}
                    , {field: 'experimentalClass', title: '实验类别'}
                    , {field: 'experimentalQuantity', title: '实验数量'}
                    , {field: 'reasonAnalysis', title: '原因分析',edit: 'text'}
                    , {field: 'improvementMeasure', title: '改善措施',edit: 'text'}
                    , {field: 'cz',title: '操作',
                        templet:function (d) {
                            var operation = '';
                            operation = "<a class='table-btn uploadTableInfo' value='"+d.receiptKey+","+d.sku+"' lay-event='scbb'>8D报告上传</a>";
                            return operation;
                        }}

                ]
            ]
            , id: 'testReload'
            , page: true
            , height: 'full-170'
            , limits: [20, 50, 100, 200, 500, 1000, 2000, 3000, 4000, 5000]
            , limit: 20
            , done: function(res, curr, count){
                // 隐藏列
                $(".layui-table-box").find("[data-field='serialkey']").css("display","none");

                //指定允许上传的文件类型
                upload.render({
                    elem: '.uploadTableInfo'
                    ,url: '/3nod_web/file/uploadFile' //改成您自己的上传接口
                    ,accept: 'file' //普通文件
                    ,done: function(res){
                        if(res.code == "S"){
                            var tableElem = this.item;
                            // 获取上传文件名
                            var fileName = res.fileName;
                            // 获取收货单号
                            var receiptkey = tableElem.attr('value').split(',')[0];
                            // 获取料号
                            var sku = tableElem.attr('value').split(',')[1];

                            var data = { receiptKey: receiptkey, sku : sku, fileName : fileName };
                            // 将文件名写入履历表
                            //$.post('/3nod_web/report/updateHistory',JSON.stringify(data) , function (text, status) { });

                            $.ajax({
                                url: "/3nod_web/report/updateHistory", // ajax请求路径
                                type: 'POST',
                                contentType: 'application/json; charset=UTF-8',
                                async: false,
                                dataType: 'json',
                                data: JSON.stringify(data),
                                success: function (data) {
                                    layer.msg('上传成功');
                                },
                                error: function () {
                                    layer.alert("上传失败");
                                }
                            });


                        }else {
                            layer.msg(res.msg);
                        }
                        return;
                    }
                });
            }
        });

        //监听单元格编辑
        table.on('edit(demo)', function(obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段

            $.ajax({
                url: "/3nod_web/report/updateHistory", // ajax请求路径
                type: 'POST',
                contentType: 'application/json; charset=UTF-8',
                async: false,
                dataType: 'json',
                data: JSON.stringify(data),
                success: function (data) {
                    if (data == '请求超时，请点击左侧菜单，重新载入!') {
                        layer.alert(data);
                        return false;
                    }
                },
                error: function () {
                    layer.alert("更新失败");
                }
            });
        });

        var $ = layui.$, active = {
            reload: function () {
                var shipper = $('#shipper');
                var sku = $('#sku');
                var supplierKey = $('#supplierKey');
                var supplierName = $('#supplierName');
                var extReceiptForm = $('#extReceiptForm');
                var startTime = $('#startTime');
                var endTime = $('#endTime');
                var checkResult = $('#checkResult');
                var remark = $('#remark');
                var reasonAnalysis = $('#reasonAnalysis');
                var improvementMeasure = $('#improvementMeasure');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        shipper: shipper.val(),
                        sku: sku.val(),
                        supplierKey: supplierKey.val(),
                        supplierName: supplierName.val(),
                        extReceiptForm: extReceiptForm.val(),
                        startTime: startTime.val(),
                        endTime: endTime.val(),
                        checkResult: checkResult.val(),
                        modelKeyStr: modelKeyStr,
                        decideWayStr: decideWayStr,
                        remark: remark.val()
                    }, height: 'full-170'
                }, 'data');
            }
        };



        $('#search').on('click', function () {
            toSubmit();
        });
        //按回车提交
        $(".layui-input-inline").keydown(function (e) {//当按下按键时
            if (e.which == 13) {//.which属性判断按下的是哪个键，回车键的键位序号为13
                toSubmit();
            }
        });
        function toSubmit() {
            //华为机型选中
            if( $("#huanweiType").prop("checked")){
                modelKeyStr='JX00000142,JX00000143';
            }else{
                modelKeyStr=formSelects.value('select1', 'valStr');
            }
            decideWayStr=formSelects.value('select2', 'valStr');
            active['reload'] ? active['reload'].call(this) : '';
        }


    });


    //货主下拉框
    function getShipper(){
        $.get("/3nod_web/report/getShipper",function (res) {
            for(var i =0;i<res.data.length;i++){
                $("#shipper").append("<option value=\""+res.data[i]+"\">"+res.data[i]+"</option>");
            }
            //重新渲染
            layui.form.render("select");
        });
    }

    //机型下拉框
    function getModelKey(){
        var shipper = $("#shipper").val();
        $("#modelKey").empty();
        $.get("/3nod_web/report/getModelKey?shipper="+shipper,function (res) {
            for(var i =0;i<res.data.length;i++){
                $("#modelKey").append("<option value=\""+res.data[i].modelKey+"\">"+res.data[i].modelName+"</option>");
            }
            //重新渲染
            layui.formSelects.render("select");
        });
    }
    //判定方式下拉框
    function getDecideWay(){
        $.get("/3nod_web/report/getDecideWay",function (res) {
            for(var i =0;i<res.data.length;i++){
                $("#decideway").append("<option value=\""+res.data[i].code+"\">"+res.data[i].description+"</option>");
            }
            //重新渲染
            layui.formSelects.render("select");
        });
    }
</script>

</body>
</html>